<template>
  <div class="step_container">
    <!-- 步骤一 -->
    <div class="step_box">
      <div class="step_tit">
        <span class="step_no">1</span>
        <span>下载邮箱验证器APP</span>
      </div>
      <div class="step_desc font_color">
        <p>ios用户等于APP Store搜索“Authenticator”下载。</p>
        <p>安卓用户登录应用商店或使用手机浏览器搜索“谷歌验证器”下载。</p>
      </div>
    </div>
    <!-- 步骤二 -->
    <div class="step_box">
      <div class="step_tit">
        <span class="step_no">2</span>
        <span>在谷歌验证器中添加密钥并备份</span>
      </div>
      <div class="step_desc font_color">
        <p>
          打开谷歌验证器，扫描下方二维码，如果您无法扫描这个二维码，请在APP中手动输入这串字符
        </p>
      </div>
    </div>
    <!-- 二维码 -->
    <div class="notice_box">
      <div>用谷歌验证器APP扫描这个二维码</div>
      <div>
        <img :src="qrcode" alt="" />
      </div>
      <div>{{ secreKey }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getSecretKey, getQrCode } from "@/api/auth";
import { onMounted, ref } from "vue";

// 获取父组件数据
const props = defineProps(["step"])
// 密钥
const secreKey = ref();
// 密钥二维码
const qrcode = ref();

// 获取密钥和密钥二维码
const getData = () => {
  if(props.step != 1) return
  getSecretKey().then((res: any) => {
    secreKey.value = res.data;
    sessionStorage.setItem("key", res.data);
    getQrCode(secreKey.value).then((res: any) => {
      qrcode.value = `data:image/png;base64,${res.data}`;
    });
  });
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
